<template>
    <div class="PlanTab">
    <el-table :data="Plandatas" style="width: 103%;height: 100%;" class="custom-table"
                       
    >
        <el-table-column prop="batch" label="采收计划批次" width="120"/>
        <el-table-column prop="times" label="计划采收时间" width="150" />
        <el-table-column prop="place" label="计划采收地块" width="120" />
        <el-table-column prop="food" label="采收作物" width="120" />
        <el-table-column prop="weight" label="计划采收量" width="100" />
        <el-table-column prop="people" label="计划执行人" width="100" />
        <el-table-column  label="操作" width="250" style="display: flex; align-items: center;">
            <template #default="{row}">
                <div class="btns">
                <el-button size="small" type="primary" @click="emits('reap',row)" style="width: 50px;margin: 0;">去采收</el-button>
                <el-button size="small" type="primary" style="width: 50px;margin: 0;" @click="emits('look',row)">查看</el-button>
                <el-button size="small" type="primary"style="width: 50px;margin: 0;" @click="emits('edit',row)">编辑</el-button>
                <el-button size="small" type="primary" style="width: 50px;margin: 0;" @click="emits('remove',row.batch)">删除</el-button>
                </div>
            </template>
        </el-table-column>

    </el-table>
    </div>
</template>

<script lang='ts' setup>
const props = defineProps(["Plandatas"])
const emits=defineEmits(['reap','look','remove','edit'])
</script>

<style lang='scss' scoped>
el-button{
    background: #1E4D58;
    // align-items: ;
}
.el-table__header {
  background-color: #0F2634!important;
  color: #0F2634!important;
}
.PlanTab{
    background: #0F2634;
    overflow: auto;
}
:deep(.custom-table .el-table__row .el-table__cell) {
    background: #0F2634 !important;
    color: #E0E0E0 !important; // 表格文字颜色
    border-color: #2A6A78 !important; // 单元格边框颜色
}
:deep(.custom-table .el-table__header-wrapper .el-table__header) {
    background: #1A3F4A !important;
    border-color: #2A6A78 !important;

    // 表头容器（强制覆盖）
    .el-table__header-wrapper {
        background: #1A3F4A !important;

    }
    // 表头单元格样式
    th {
        background: #1D4A56 !important;
        color: #eee !important; // 表头文字颜色
        border-color: #2A6A78 !important; // 表头边框颜色
        height: 3px!important;
    }
}
.btns{
    display: flex;
    flex-wrap: wrap;
    gap:3px;
}
</style>